<template>
    <div id="user-woman-detail">
        <el-form ref="formData" :model="formData" label-width="130px">
        <el-form-item label="账号：">
            <span>{{formData.account}}</span>
        </el-form-item>
        <el-form-item label="昵称：">
            <span>{{formData.nickname}}</span>
        </el-form-item>
        <el-form-item label="邀请码：">
            <span>{{formData.invite_code}}</span>
        </el-form-item>
        <el-form-item label="注册时间：">
            <span>{{formData.register_time}}</span>
        </el-form-item>
        <el-form-item label="认证：">
            <span>{{formData.authenticate}}</span>
        </el-form-item>
        <el-form-item label="现金：">
            <span>{{formData.property}}</span>
        </el-form-item>
        <el-form-item label="可提现：">
            <span>{{formData.cash}}</span>
        </el-form-item>
        <el-form-item label="累计收入：">
            <span>{{formData.income}}</span>
        </el-form-item>
        <el-form-item label="会员：">
            <span>{{formData.is_member}}</span>
        </el-form-item>
        <el-form-item label="隐私状态：">
            <span>{{formData.privacy}}</span>
        </el-form-item>
        <el-form-item label="地区：">
            <span>{{formData.area}}</span>
        </el-form-item>
        <el-form-item label="年龄：">
            <span>{{formData.age}}</span>
        </el-form-item>
        <el-form-item label="身份：">
            <span>{{formData.identity}}</span>
        </el-form-item>
        <el-form-item label="身高：">
            <span>{{formData.high}}</span>
        </el-form-item>
        <el-form-item label="体重：">
            <span>{{formData.weight}}</span>
        </el-form-item>
        <el-form-item label="胸围：">
            <span>{{formData.bust}}</span>
        </el-form-item>
        <el-form-item label="自评：">
            <span>{{formData.evaluate}}</span>
        </el-form-item>
        <el-form-item label="语言：">
            <span>{{formData.language}}</span>
        </el-form-item>
        <el-form-item label="状态：">
            <span>{{formData.state}}</span>
        </el-form-item>
        <el-form-item label="约会要求：">
            <span>{{formData.appointment}}</span>
        </el-form-item>
        <el-form-item label="手机号码：">
            <span>{{formData.phone}}</span>
        </el-form-item>
        <el-form-item label="微信：">
            <span>{{formData.wechat}}</span>
        </el-form-item>
        <el-form-item label="QQ：">
            <span>{{formData.qq}}</span>
        </el-form-item>
        <el-form-item class="btn-height">
            <el-button type="primary" @click="onSubmit()">封设备</el-button>
            <el-button type="info" plain @click="onSubmit()">解封设备</el-button>
            <el-button type="primary" @click="onSubmit()">冻结/解冻</el-button>
            <el-button type="info" plain @click="onSubmit()">可疑/取消可疑</el-button>
            <el-button type="info" plain @click="goback()">返回</el-button>
        </el-form-item>
        </el-form>
        <div class="ui-img">
        <p class="ui-img-title">头像</p>
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
        <div class="ui-img">
        <p class="ui-img-title">红包照片</p>
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
        <div class="ui-img">
        <p class="ui-img-title">普通照片</p>
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'user-woman-detail',
    data () {
        return {
            site_id: '',
            formData: {
                account: '0000001',
                invite_code: '123323',
                authenticate: '未认证',
                property: '48元',
                cash: '40元',
                income: '130元',
                register_time: '2018-09-08',
                is_member: '是',
                privacy: '付费查看',
                area: '广东 广州',
                nickname: '大菠萝',
                age: '12',
                identity: '老师',
                high: '170cm',
                weight: '80kg',
                bust: '38B',
                evaluate: '有趣',
                language: '普通话',
                state: '封锁',
                appointment: '素质',
                phone: '13570238438',
                wechat: 'linwid',
                qq: '12345678'
            },
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    created () {
        // this.formData.group_list = []
    },
    mounted () {
        // 获取搜索参数数据
        // this.getParams()
    },
    methods: {
        handleRemove (file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
            // console.log(this.dialogImageUrl)
        },
        onSubmit () {
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.postAddData()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        goback () {
            this.$router.go(-1)
        },
        // 获取站点详情
        getData (id) {
            this.$api.site.getDetail(id, res => {
                // 隐藏加载动画
                // this.$vux.loading.hide()
                if (res.code === 200) {
                    this.formData = {
                        station_name: res.data.name,
                        station_url: res.data.url,
                        station_state: res.data.type,
                        state_list: this.formData.state_list,
                        // collect_from: res.data.source,
                        group_list: this.formData.group_list,
                        notice_group: this.getGroupData(res.data.notification),
                        code_template: parseInt(res.data.code_template),
                        template_list: this.formData.template_list,
                        time_interval: res.data.monitor_interval_name,
                        time_list: this.formData.time_list
                        // time_cycle: res.data.monitor_period_name,
                        // cycle_list: this.formData.cycle_list
                    }
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    #user-woman-detail {
        width: 740px;
        height: 100%;
        padding: 10px 0;
        .el-form-item{
            display: inline-block;
            margin-bottom: 0;
            width: 360px;
        }
        .el-form-item__content{
            height: 30px;
        }
        .el-form-item__label{
            height: 30px;
        }
        .btn-height{
            width: 720px;
            padding: 10px 0 20px 0;
        }
        .ui-img{
            display: block;
            padding: 8px 48px;
        }
        .ui-img-title{
            display: block;
            line-height: 36px;
            font-size: 18px;
        }
    }
</style>
